<template>
    <div class="mineList">
      <div class="mineTop">
          <div style="width:46px;height:100%;" @click="topBack"><img class="returnBack" src="../../assets/img/returnback.png"
                                                            alt=""></div>
          <div class="title">我的</div>
      </div>
      <div class="bgLine"></div>
      <div class="mineListCon">
        <div class="userInfo">
          <div class="uesrLogo"><img :src="imgPath" alt=""></div>
          <div class="userName">
            <div class="name">{{nickName}}</div>
            <img @click="goVip" src="../../assets/img/vipkaitong.png" alt="">
          </div>
        </div>
        <div class="userCenter">
          <div class="wracon">
            <div class="jinbi">{{coin}}</div>
            <div class="jinbiBtom">
              <img class="img" src="../../assets/img/jinbiyue.png" alt="">
              <span>我的书币</span>
            </div>
          </div>
          <div class="wracon">
            <div class="jinbi">{{days}}</div>
            <div class="jinbiBtom">
              <img class="imgs" src="../../assets/img/chaojivip.png" alt="">
              <span>vip剩余天数</span>
            </div>
          </div>
        </div>
        <div class="others">
          <div class="comRow">
            <span class="leftImg"><img src="../../assets/img/bookGold.png" alt=""></span>
            <span class="text">书币充值</span>
            <div class="btn" @click="goRecharge">
              <img src="../../assets/img/recharge.png" alt="">
            </div>
          </div>
          <div class="comRow">
            <span class="leftImg"><img src="../../assets/img/chaojivip.png" alt=""></span>
            <span class="text">超级VIP</span>
            <span class="textsmall">全站免费看</span>
            <div class="btn" @click="goVip">
              <img src="../../assets/img/jiaru.png" alt="">
            </div>
          </div>
          <div class="comRow">
            <span class="leftImg"><img src="../../assets/img/autobuy.png" alt=""></span>
            <span class="autobuy">自动购买</span>
            <div  @click="autoBuy"><wv-switch v-model="switchValue"></wv-switch></div>
          </div>
          <div class="comRow" @click="goService">
            <span class="leftImg"><img src="../../assets/img/kefu.png" alt=""></span>
            <span class="text">联系客服</span>
            <div class="arrowBtn">
              <img src="../../assets/img/rightJT.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="shareRk"><img @click="goShareInfo" src="../../assets/img/loopfuckpic.png" alt=""></div>
    </div>
</template>
<script>
  import { Switch } from 'we-vue'
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        isFirstEnter: false, // 是否第一次进入，默认false
        imgPath: require('../../assets/img/my-pic.png'),
        nickName: '',
        coin:0,
        switchValue:false,
        days:0,
        viptype:0,
        vipdate:''
      }
    },
    activated() {
      this.login(data=> {
        if(data=='success'){
          this.goldBalance();
          if(!this.$store.state.userInfo.imgPath){
            this.getCode();
            if (this.$store.state.userCode) {
              this.authorlogin();
            } else {
              this.getUser();
            }
          }else{
            this.imgPath=this.$store.state.userInfo.imgPath;
            this.nickName=this.$store.state.userInfo.nickName;
            this.switchValue=this.$store.state.userInfo.autoBuy;
          }
        }
      });
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      goRecharge() {
        this.$router.push({path: '/recharge'});
      },
      goVip(){
        this.$router.push({path:'/supervip'});
      },
      goService() {
        this.$router.push({path: '/customService'});
      },
      getUser() {
        let times = Date.parse(new Date());
        let md5 = this.getmd5(localStorage.getItem('uuid') + times).toUpperCase();
        this.$http({
          method: 'get',
          url: this.apiUrl.getUser,
          headers: {times: times, sign: md5}
        }).then(res => {
          var data = res.data;
          if (data.code == 1) {
            localStorage.setItem('uuid', data.uuid);
            this.imgPath =this.$store.state.userInfo.imgPath= data.imagePath;
            this.nickName =this.$store.state.userInfo.nickName= data.nickName;
            this.switchValue = this.$store.state.userInfo.autoBuy= data.autoBuy;
          } else if (data.code == 3) {
            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx30e74a0a5ca3c0bd&redirect_uri=http%3a%2f%2fs.55duanzi.com%2fnovel%2fdist%2findex.html%23%2fmineList&response_type=code&scope=snsapi_userinfo&state=user#wechat_redirect';
          }
        }).catch(error => {
        });
      },
      /*用户授权*/
      authorlogin() {
        this.$http({
          method: 'get',
          url: this.apiUrl.authorlogin,
          params: {
            code: this.$store.state.userCode,
          }
        }).then(res => {
          var data = res.data;
          if (data.code == 1) {
            this.imgPath =this.$store.state.userInfo.imgPath= data.imagePath;
            this.nickName =this.$store.state.userInfo.nickName= data.nickName;
          }
        }).catch(error => {
        });
      },
      /*金币余额*/
      goldBalance(){
        let times = Date.parse(new Date());
        let md5 = this.getmd5(localStorage.getItem('uuid') + times).toUpperCase();
        this.$http({
          method:'post',
          url:this.apiUrl.novelCoinSurplus,
          headers: {times: times, sign: md5}
        }).then(res=>{
          if(res.status==200){
            this.coin = res.data.coin;
            this.days = res.data.days;
            this.viptype = this.$store.state.viptype = res.data.type;
            this.vipdate = this.$store.state.vipdate = res.data.date;
          }
        }).catch();
      },
      autoBuy(){
        let times = Date.parse(new Date());
        let md5 = this.getmd5(localStorage.getItem('uuid') + times).toUpperCase();
        let buys = !this.switchValue;
        this.$http({
          method:'post',
          url:this.apiUrl.novelUserAutobuy,
          params:{autoBuy:buys},
          headers: {times: times, sign: md5}
        }).then(res=>{
          if(res.status==200){
            this.switchValue = this.$store.state.userInfo.autoBuy= buys;
            if(!buys){
              Toast({
                message: '取消自动购买成功，付费章节将不自动扣除书币',
                position: 'bottom',
                duration: 2000
              });
            }
          }
        }).catch();
      },
      goShareInfo(){
        this.$router.push({path:'/sharecon'})
      }
    }
  }
</script>
<style>
  .mineList{
    padding-top: 46px;
  }
  .mineList .mineListCon {
    padding: 0 20px;
  }

  .mineList .mineTop {
    width: 100%;
    height: 46px;
    line-height: 46px;
    padding-left: 15px;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 999;
  }

  .mineList .mineTop .returnBack {
    width: 12px;
    height: auto;
    vertical-align: middle;
    position: absolute;
    left: 15px;
    top: 13px;
  }

  .mineList .mineTop .title {
    font-size: 17px;
    font-weight: 700;
    width: 100px;
    height: 46px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    line-height: 46px;
    text-align: center;
  }

  .mineList .bgLine{
    width: 100%;
    height: 3px;
    background: #eee;
  }

  /* .mineList .mineListCon .lineBg {
    width: 100%;
    height: 5px;
    background: url('../../assets/img/linebg.png');
  } */

  .mineList .mineListCon .userInfo {
    display: flex;
    width: 100%;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .mineList .mineListCon .userInfo .uesrLogo {
    width: 74px;
    border-radius: 50%;
    overflow: hidden;
  }

  .mineList .mineListCon .userInfo .uesrLogo img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .userInfo .userName .name {
    padding-left: 5px;
    line-height: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    font-size: 18px;
  }

  .mineList .mineListCon .userInfo .userName img{
    width: 90px;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .userCenter{
    display: -webkit-flex;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 25px;
    position: relative;
  }

  .mineList .mineListCon .userCenter:after{
      background: #e0e0e0;
      content: "";
      height: 60%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      width: 1px;
 }

  .mineList .mineListCon .userCenter .jinbi{
    font-size: 28px;
    color: #ff4646;
    font-weight: 700;
  }

  .mineList .mineListCon .userCenter .jinbiBtom{
    line-height: 20px;
  }

  .mineList .mineListCon .userCenter .jinbiBtom .img{
    width: 20px;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .userCenter .jinbiBtom .imgs{
    width: 18px;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .userCenter .jinbiBtom span{
    font-size: 14px;
    color: #666;
    vertical-align: middle;
  }

  .mineList .mineListCon .others {
    font-size: 16px;
    color: #666;
  }

  .mineList .mineListCon .others .comRow {
    display: -webkit-flex;
    display: flex;
    line-height: 16px;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #e0e0ee;
  }

  .mineList .mineListCon .others .comRow:last-child {
    /* border: none; */
  }
  .mineList .mineListCon .others .comRow:first-child {
    border-top:1px solid #e0e0ee;
  }

  .mineList .mineListCon .others .comRow .leftImg {
    width: 20px;
    margin-right: 18px;
  }

  .mineList .mineListCon .others .comRow .leftImg img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .others .comRow .text {
    padding-right: 15px;
    vertical-align: middle;
  }

  .mineList .mineListCon .others .comRow .textsmall {
    vertical-align: middle;
    font-size: 12px;
    color: #999;
  }

  .mineList .mineListCon .others .comRow .autobuy{
    flex: 1;
  }

  .mineList .mineListCon .others .comRow .btn {
    flex: 1;
    text-align: right;
  }

  .mineList .mineListCon .others .comRow .btn img {
    width: 54px;
    height: auto;
    vertical-align: middle;
  }

  .mineList .mineListCon .others .comRow .arrowBtn {
    flex: 1;
    text-align: right;
  }

  .mineList .mineListCon .others .comRow .arrowBtn img {
    width: 10px;
    height: auto;
    vertical-align: middle;
  }

  .userName {
    margin-left: 14px;
  }
  .mineList .weui-cell{
    padding: 0 !important;
  }
  .mineList .wv-switch{
    height: 22px !important;
  }
  .mineList .wv-switch .background, .wv-switch .thumb{
     height: 20px !important;
  }
  .mineList .weui-cell:before{
    border: none !important;
  }
  .mineList .wv-switch-on .thumb{
    transform: translate3d(30px,0px,0px)!important;
  }
  .mineList .wv-switch .thumb[data-v-7a6cd1bc]{
    width: 23px !important;
    background-color: #ff4646 !important;
  }
  .mineList .wv-switch.wv-switch-on[data-v-7a6cd1bc]{
    background: pink!important;
    border-color: pink!important;
  }
  .wv-switch .background[data-v-7a6cd1bc]{
    width: 52px!important;
  }
  .wv-switch[data-v-7a6cd1bc]{
    width: 54px!important;
  }
  .mineList .shareRk{
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 0 20px 100px 20px;
  }
  .mineList .shareRk img{
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
</style>
